<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .wrapper{
        height: 200px;
        background-color: red;
        
    }
  </style>
</head>
<body>
<!-- 使用better-scroll：子标签只能有一个，孙子标签可以有多个-->
<div class="wrapper">
  <ul class="content">
    <li>列表数据1</li>
    <li>列表数据2</li>
    <li>列表数据3</li>
    <li>列表数据4</li>
    <li>列表数据5</li>
    <li>列表数据6</li>
    <li>列表数据7</li>
    <li>列表数据8</li>
    <li>列表数据9</li>
    <li>列表数据10</li>
    <li>列表数据11</li>
    <li>列表数据12</li>
    <li>列表数据13</li>
    <li>列表数据14</li>
    <li>列表数据15</li>
    <li>列表数据16</li>
    <li>列表数据17</li>
    <li>列表数据18</li>
    <li>列表数据19</li>
    <li>列表数据20</li>
    <li>列表数据21</li>
    <li>列表数据22</li>
    <li>列表数据23</li>
    <li>列表数据24</li>
    <li>列表数据25</li>
    <li>列表数据26</li>
    <li>列表数据27</li>
    <li>列表数据28</li>
    <li>列表数据29</li>
    <li>列表数据30</li>
    <li>列表数据31</li>
    <li>列表数据32</li>
    <li>列表数据33</li>
    <li>列表数据34</li>
    <li>列表数据35</li>
    <li>列表数据36</li>
    <li>列表数据37</li>
    <li>列表数据38</li>
    <li>列表数据39</li>
    <li>列表数据40</li>
    <li>列表数据41</li>
    <li>列表数据42</li>
    <li>列表数据43</li>
    <li>列表数据44</li>
    <li>列表数据45</li>
    <li>列表数据46</li>
    <li>列表数据47</li>
    <li>列表数据48</li>
    <li>列表数据49</li>
    <li>列表数据50</li>
    <li>列表数据51</li>
    <li>列表数据52</li>
    <li>列表数据53</li>
    <li>列表数据54</li>
    <li>列表数据55</li>
    <li>列表数据56</li>
    <li>列表数据57</li>
    <li>列表数据58</li>
    <li>列表数据59</li>
    <li>列表数据60</li>
    <li>列表数据61</li>
    <li>列表数据62</li>
    <li>列表数据63</li>
    <li>列表数据64</li>
    <li>列表数据65</li>
    <li>列表数据66</li>
    <li>列表数据67</li>
    <li>列表数据68</li>
    <li>列表数据69</li>
    <li>列表数据70</li>
    <li>列表数据71</li>
    <li>列表数据72</li>
    <li>列表数据73</li>
    <li>列表数据74</li>
    <li>列表数据75</li>
    <li>列表数据76</li>
    <li>列表数据77</li>
    <li>列表数据78</li>
    <li>列表数据79</li>
    <li>列表数据80</li>
    <li>列表数据81</li>
    <li>列表数据82</li>
    <li>列表数据83</li>
    <li>列表数据84</li>
    <li>列表数据85</li>
    <li>列表数据86</li>
    <li>列表数据87</li>
    <li>列表数据88</li>
    <li>列表数据89</li>
    <li>列表数据90</li>
    <li>列表数据91</li>
    <li>列表数据92</li>
    <li>列表数据93</li>
    <li>列表数据94</li>
    <li>列表数据95</li>
    <li>列表数据96</li>
    <li>列表数据97</li>
    <li>列表数据98</li>
    <li>列表数据99</li>
    <li>列表数据100</li>
  </ul>
</div>

<script src="./better-scroll.js"></script>
<script>
  /*
     默认情况下BScroll是不可以实时的监听滚动位置的
     1.probeType 侦测
            0,1 都是不侦测实时的位置
  *         2 在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
  *         3 只要是滚动，都侦测
    
     默认情况下BScroll里会阻止浏览器的原生click事件
     2. click 默认值：false
              true better-scroll会派发一个click事件
              
     3.pullUpLoad 默认值：false
              true 可以开启上拉加载更多
  * */
  const bscroll = new BScroll(document.querySelector('.wrapper'),{
  probeType: 3,
    click: true,
    pullUpLoad: true
  })
  // bscroll.on:表示监听事件  参数一：要监听的事件类型  参数二：函数
  bscroll.on('scroll',position => {
    console.log(position);  //（返回参数记录了实时滚动到的位置坐标）
  })
  // pullingUp事件：当监听到这个事件的时候，会回调后面的函数（这个事件在上拉加载更多时触发）
  bscroll.on('pullingUp',() => {
    console.log('上拉加载更多');
  // 发送网络请求，请求更多页的数据
  //  等数据请求完成，并且将新的数据展示出来后，调用finishPullUp方法
  //  finishPullUp():结束这次上拉加载行为, 这样下次才能继续使用上拉加载。不调用这个方法，只能使用一次上拉加载更多
    setTimeout(() => {
      bscroll.finishPullUp();
    },2000)
  })
</script>
</body>
</html>